import React, { useState } from 'react'
import { Header, AlertTip, RouterView } from 'src/components'
import { postAddAddress } from 'src/api/getData'
import classNames from 'classnames'
import { useSelector, useDispatch } from 'react-redux'
import { ADD_ADDRESS } from 'src/redux/action-type'
import { Link, useHistory } from 'react-router-dom'
import routerData from './routerData'
import './index.scss'

// 新增收货地址
const AddAddress = () => {

    const {
        userInfo,
        addAddress,
        // removeAddress,
        // newAddress,
        geohash
    } = useSelector(state => state);

    const dispatch = useDispatch();
    const history = useHistory();
    const [verify, setVerity] = useState(false);			//姓名
    // const [verifytwo, setVerifytwo] = useState(false);		//备注
    const [verifythree, setVerifythree] = useState(false);		//地址
    const [verifyfour, setVerifyfour] = useState(false);		//电话
    const [verifyfive, setVerifyfive] = useState(false);		//备用电话
    const [butpart, setButpart] = useState(false);			//新增地址按钮的透明度
    const [sendaddress, setSendaddress] = useState('');  //地址
    const [message, setMessage] = useState(''); //信息
    const [mesthree, setMesthree] = useState(''); //送餐地址
    const [telenum, setTelenum] = useState(''); //手机号
    const [telephone, setTelephone] = useState(''); //手机号提示
    const [standbytele, setStandbytele] = useState(''); //备用手机号提示 
    const [standbytelenum, setStandbytelenum] = useState(''); //备用手机号
    // const [addSearch, setAddSearch] = useState(false); //添加搜索地址
    const [showAlert, setShowAlert] = useState(false); //弹出框
    const [alertText, setAlertText] = useState(); //弹出信息

    const inputThing = (value) => {
        if (!value) {
            setVerity(true)
        } else {
            setVerity(false)
        }
        bindThing()
    }
    //输入地址
    const inputThingthree = (value) => {
        setVerifythree(true)
        if (value.length === 0) {
            setSendaddress('请详细填写送餐地址')
        } else if (value.length > 0 && value.length <= 2) {
            setSendaddress('送餐地址太短了，不能辨识')
        } else {
            setSendaddress('')
            setVerifythree(false)
        }
        bindThing()
    }
    //输入手机号
    const inputThingfour = (value) => {
        setVerifyfour(true)
        if ((/^[1][358][0-9]{9}$/).test(value)) {
            setVerifyfour(false)
        } else if (value === '') {
            setTelephone("手机号不能为空")
        } else {
            setTelephone("请输入正确的手机号")
        }
        bindThing()
    }
    //输入备注手机号
    const inputThingfive = (value) => {
        setVerifyfive(true)
        if ((/^[1][358][0-9]{9}$/).test(value) || value === '') {
            setVerifyfive(false)
        } else {
            setStandbytele("请输入正确的手机号")
        }
        bindThing();
    }
    const bindThing = () => {
        if (message && mesthree && !verifyfour) {
            setButpart(true)
        } else {
            setButpart(false)
        }
    }
    //保存地址
    const submitThing = async () => {
        let res = await postAddAddress(userInfo.user_id, mesthree, addAddress, geohash, message, telenum, standbytelenum, 0, 1, '公司', 4);
        if (res.message) {
            setShowAlert(true)
            setAlertText(res.message)
        } else if (butpart) {
            //保存的地址存入store
            dispatch({
                type: ADD_ADDRESS,
                name: message,
                address: mesthree,
                address_detail: addAddress,
                geohash: 'wtw37r7cxep4',
                phone: telenum,
                phone_bk: standbytelenum,
                poi: addAddress,
                poi_type: 0,
            })
            history.go(-1);
        }
    }
    const onClose = () => {
        setShowAlert(false)
    }
    return <div className="page_profile_info_address_add">
        <Header title="新增地址" goBack></Header>
        <section className="adddetail">
            <form action="">
                <section className="ui-padding-block">
                    <div className="input-new">
                        <input
                            type="text"
                            placeholder="请填写你的姓名"
                            className={classNames({ verifies: verify })}
                            value="message"
                            onInput={
                                (e) => {
                                    inputThing(e.target.value)
                                    setMessage(e.target.value)
                                }
                            }
                        />
                        {verify && <p>请填写您的姓名</p>}
                    </div>
                    <Link to='/profile/info/address/add/addDetail' className="add-detail">
                        <div className="input-new">
                            <input
                                type="text"
                                placeholder="小区/写字楼/学校等"
                                readonly="readonly"
                                value={addAddress}
                            />
                        </div>
                    </Link>
                    <div className="input-new">
                        <input
                            type="text"
                            placeholder="请填写详细送餐地址"
                            className={classNames({ verifies: verifythree })}
                            value={mesthree}
                            onInput={(e) => {
                                inputThingthree(e.target.value)
                                setMesthree(e.target.value)
                            }}
                        />
                        {verifythree && <p>{sendaddress}</p>}
                    </div>
                    <div className="input-new">
                        <input
                            type="text"
                            placeholder="请填写能够联系到您的手机号"
                            className={classNames({ verifies: verifyfour })}
                            value={telenum}
                            onInput={(e) => {
                                inputThingfour(e.target.value)
                                setTelenum(e.target.value)
                            }} />
                        {verifyfour && <p>{telephone}</p>}
                    </div>
                    <div className="input-new">
                        <input type="text"
                            placeholder="备用联系电话（选填）"
                            value={standbytelenum}
                            onInput={(e) => {
                                inputThingfive(e.target.value)
                                setStandbytelenum(e.target.value)
                            }}
                        />
                        {verifyfive && <p>{standbytele}</p>}
                    </div>
                </section>
                <section className="addbutton">
                    <button className={classNames({ butopacity: butpart })} onClick={submitThing}>新增地址</button>
                </section>
            </form>
        </section>

        {showAlert && <AlertTip onClose={onClose} alertText={alertText}></AlertTip>}
        <RouterView data={routerData} />
    </div>
}

export default AddAddress